<template>
  <div class="app-container">
    <el-form :inline="true" label-width="68px">
      <el-form-item label="部门名称">
        <el-input v-model="queryParams.name" placeholder="请输入部门名称" clearable size="small"/>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="queryParams.address" placeholder="请输入地址" clearable size="small"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini">搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini"
                   @click="handleAdd">新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" icon="el-icon-edit" size="mini"
                   @click="handleUpdate(null)">修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" icon="el-icon-delete" size="mini" :loading="delLoading">删除
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading"
              :data="list"
              row-key="id"
              :tree-props="{children: 'children'}">
      <el-table-column type="selection"/>
      <el-table-column label="ID" width="120" prop="id"/>
      <el-table-column label="名称" prop="name"/>
      <el-table-column label="地址" prop="address"/>
      <el-table-column label="代号" prop="code"/>
      <el-table-column label="排序" prop="sort"/>
      <el-table-column label="创建时间" prop="createTime" width="160">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="240" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit"
                     @click="handleUpdate(scope.row)">修改
          </el-button>
          <el-popover :ref="scope.row.id" placement="top" width="180">
            <p>确定删除本条数据吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消
              </el-button>
              <el-button :loading="loading" type="primary" size="mini" @click="handleDelete(scope.row.id)">确定
              </el-button>
            </div>
            <el-button slot="reference" type="text" icon="el-icon-delete" size="mini">删除
            </el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改对话框 -->
    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="600px">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="部门编号" prop="code">
              <el-input v-model="form.code" placeholder="请输入部门编号"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入部门名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门地址" prop="name">
              <el-input v-model="form.address" placeholder="请输入部门地址"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序" prop="sort">
              <el-input-number v-model="form.sort" :value="1" :min="1" :max="10" label=""></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上级资源">
              <el-tree :data="parentOrganizationOption" :props="defaultProps" ref="tree"
                       :expand-on-click-node="false" node-key="id"
                       :highlight-current="true" :check-on-click-node="true"
                       @node-click="handleNodeClick">
              </el-tree>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getRoleList} from "@/api/role";
import {deleteOrganization, findById, getOrganizationOption, saveOrganization} from "@/api/organization";

export default {
  name: 'OrganizationView',
  data() {
    return {
      parentOrganizationOption: [],
      loading: false,
      open: false,
      delLoading: false,
      // 对话框标题
      title: '',
      formReset: {},
      // 表单参数
      form: {
        name: '',

      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn: "createTime",
        isAsc: "desc",
        //此处和具体的组件合并后可以设置查询参数
        loginName: undefined,
        phone: undefined,
        status: undefined,
      },
      list: [],
      // 默认密码
      initPassword: "123456",
      // 状态数据字典
      statusOptions: [],
      // 性别状态字典
      sexOptions: [],
      // 角色选项
      roleOptions: [],
      organizationOptions: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      // 表单校验
      rules: {
        sort: [
          {required: true, message: "排序不能为空", trigger: "blur"}
        ],
        code: [
          {required: true, message: "部门编号不能为空", trigger: "blur"}
        ],
        name: [
          {required: true, message: "部门名称不能为空", trigger: "blur"}
        ],
        address: [
          {required: true, message: "地址不能为空", trigger: "blur"}
        ],
      }
    };
  },
  created() {
    this.loadOrganizationList();
    this.reset();
  },
  methods: {
    loadOrganizationList() {
      getOrganizationOption().then(res => {
        this.list = res.data;
        this.parentOrganizationOption = res.data;
      })
    },
    handleDelete(id) {
      deleteOrganization(id).then(res => {
        if (res.code === 200) {
          this.loadOrganizationList();
          this.msgSuccess("删除成功!");
        } else {
          this.msgError("删除失败!");
        }
      })
    },
    handleNodeClick(data) {
      this.form.parentId = data.id;
    },
    cancel() {
      this.open = false;
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    /** 查询角色列表 */
    getRoles() {
      getRoleList().then(res => {
        this.roleOptions = res.data;
      })
    },
    getOrganization() {
      getOrganizationOption().then(res => {
        this.organizationOptions = res.data;
      })
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.loadOrganizationList();
      this.open = true;
      this.title = "添加资源";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.loadOrganizationList();
      findById(row.id).then(response => {
        console.log(response)
        this.form = response.data;
        this.open = true;
        this.title = "修改资源";
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          saveOrganization(this.form).then(res => {
            if (res.code === 200) {
              this.msgSuccess('提交成功!');
              this.open = false;
              this.reset();
            }
          })
        }
      });
    },
    reset() {
      this.open = false;
      this.form = {}
      this.loadOrganizationList();
    }
  }
};
</script>

<style scoped>

</style>
